<template>
	<div>
		<div
			class="game-result-content bg-[#131A27] flex justify-center items-center overflow-hidden"
			:class="{ 'min-h-[200px]': loading }">
			<n-spin :show="show" class="w-full">
				<div class="flex justify-center items-center" ref="gameVerifyContent">
					{{ $t('miniGames.notResults') }}
				</div>
			</n-spin>
		</div>
		<div>
			<div class="text-base mt-2">{{ $t('miniGames.game') }}</div>
			<div class="mt-1">
				<n-select
					class="bg-inher bg-[#131A27] rounded-md h-[40px]"
					v-model:value="selectGame"
					:options="gamesOptions"
					@update:value="changeSelectGame" />
			</div>
		</div>
		<div class="mt-[10px]">
			<div class="text-base">{{ $t('miniGames.clientSeed') }}</div>
			<div class="mt-1">
				<n-input
					class="bg-[#131A27] h-[40px] input-style"
					:placeholder="$t('miniGames.placeholderClientSeed')"
					v-model:value="clientSeed" />
			</div>
		</div>
		<div class="mt-[10px]">
			<div class="text-base">{{ $t('miniGames.serverSeed') }}</div>
			<div class="mt-1">
				<n-input
					class="bg-[#131A27] h-[40px] input-style"
					:placeholder="$t('miniGames.placeholderServerSeed')"
					v-model:value="serverSeed" />
			</div>
		</div>
		<div class="mt-[10px]">
			<div class="text-base">{{ $t('miniGames.vNounce') }}</div>
			<div class="mt-1">
				<n-input-group class="h-[40px]" size="large">
					<n-input
						class="bg-[#131A27] h-[40px] input-style"
						:placeholder="$t('miniGames.placeholderNounce')"
						v-model:value="nounce"
						:allow-input="onlyAllowNumber">
						<template #suffix>
							<div
								class="flex items-center flex-col text-[10px] w-[20px] rounded-[2px]"
								style="background-color: #3e4c68">
								<base-icon class="point" :size="12" name="superior" @click="add" />
								<base-icon class="point" :size="12" name="down" @click="down" />
							</div>
						</template>
					</n-input>
				</n-input-group>
			</div>
		</div>
		<template v-if="selectGame === 'plinko'">
			<div class="mt-[10px]">
				<div class="text-base">{{ $t('miniGames.risk') }}</div>
				<div class="mt-1">
					<n-select
						class="bg-inher bg-[#131A27] rounded-md h-[40px]"
						placeholder=""
						v-model:value="risk"
						:options="riskOptions" />
				</div>
			</div>
			<div class="mt-[10px]">
				<div class="text-base">{{ $t('miniGames.row') }}</div>
				<div class="mt-1">
					<n-select
						class="bg-inher bg-[#131A27] rounded-md h-[40px]"
						placeholder=""
						v-model:value="rows"
						:options="rowsOptions" />
				</div>
			</div>
		</template>
		<template v-else-if="selectGame === 'mines'">
			<div class="mt-[10px]">
				<div class="text-base">{{ $t('miniGames.mines') }}</div>
				<div class="mt-1">
					<n-select
						class="bg-inher bg-[#131A27] rounded-md h-[40px]"
						placeholder=""
						v-model:value="mines"
						:options="minesOptions" />
				</div>
			</div>
		</template>
		<template v-else-if="selectGame === 'wheel'">
			<div class="mt-[10px]">
				<div class="text-base">{{ $t('miniGames.risk') }}</div>
				<div class="mt-1">
					<n-select
						class="bg-inher bg-[#131A27] rounded-md h-[40px]"
						placeholder=""
						v-model:value="risk"
						:options="riskOptions" />
				</div>
			</div>
			<div class="mt-[10px]">
				<div class="text-base">{{ $t('miniGames.paragraph') }}</div>
				<div class="mt-1">
					<n-select
						class="bg-inher bg-[#131A27] rounded-md h-[40px]"
						placeholder=""
						v-model:value="rows"
						:options="rowsWheelOptions" />
				</div>
			</div>
		</template>
		<div ref="gameHiddenContent" style="display: none"></div>
	</div>
</template>

<script lang="ts" setup>
import { BaseIcon } from '@/components/base'
import { NInput, NSelect, NSpin, NInputGroup } from 'naive-ui'
import { ref, watch, onMounted } from 'vue'
import {
	minesOptions,
	riskTextMap,
	titleKv,
	rowsOptions,
	rowsWheelOptions
} from '@/views/games/config'
import { useGameDetailStore } from '@/store'
import { t } from '@/utils'
import { debounce } from 'lodash-es'
import router from '@/router'
import {
	plinkoSeedVerify,
	minesSeedVerify,
	diceSeedVerify,
	limboSeedVerify,
	kenoSeedVerify,
	wheelSeedVerify,
	diamondsSeedVerify
} from './verifyUtils'

const gameDetailStore = useGameDetailStore()
const props = defineProps({
	showDialog: {
		type: Boolean,
		default: false
	}
})

const selectGame = ref('plinko')
const mines = ref(3)
const show = ref<boolean>(false)
const loading = ref<boolean>(true)
const rows = ref('8')
const risk = ref<any>('LOW_RISK')
const riskKeno = ref<any>('CLASSIC')
const gamesOptions = Object.keys(titleKv).map((key) => {
	return {
		label: titleKv[key],
		value: key
	}
})
const riskOptions = Object.keys(riskTextMap()).map((key) => ({
	label: riskTextMap()[key],
	value: key
}))
const gameVerifyContent = ref<any>(null)
const gameHiddenContent = ref<any>(null)
const nounce = ref<any>('0')
const clientSeed = ref('')
const serverSeed = ref('')
const onlyAllowNumber = (value: string) => !value || /^\d+(\.\d*)?$/.test(value)
const rest = () => {
	nounce.value = '0'
	clientSeed.value = ''
	serverSeed.value = ''
	const route = router.currentRoute.value
	const id = route.path?.split('/').pop()
	console.log(id, 'xxxxx')
	if (id) {
		selectGame.value = id
		if (selectGame.value === 'wheel') {
			risk.value = 'MEDIUM_RISK'
			rows.value = '20'
		}
	}
}
const setVerify = (val: any) => {
	if (val) {
		serverSeed.value = val.serverSeed
		clientSeed.value = val.clientSeed
		nounce.value = val.nonce
		if (selectGame.value === 'plinko') {
			risk.value = val.details?.risk
			rows.value = val.details?.rows
		} else if (selectGame.value === 'mines') {
			mines.value = val.details?.minesCount
		} else if (selectGame.value === 'wheel') {
			risk.value = val.details?.risk
			rows.value = val.details?.segments
		}
	}
}
watch(
	() => props.showDialog,
	(val) => {
		if (val) {
			rest()
		}
	}
)
const changeSelectGame = (val: string) => {
	selectGame.value = val
	if (selectGame.value === 'wheel') {
		risk.value = 'MEDIUM_RISK'
		rows.value = '20'
	} else if (selectGame.value === 'plinko') {
		risk.value = 'LOW_RISK'
		rows.value = '8'
	}
	debouncedHandler()
}
const setShow = (status: boolean): void => {
	show.value = status
}
const setLoading = (status: boolean): void => {
	loading.value = status
}
const debouncedHandler = debounce(() => {
	if (!clientSeed.value) {
		loading.value = true
		gameVerifyContent.value.innerHTML = t('miniGames.notResults')
		return
	}
	if (selectGame.value === 'plinko') {
		plinkoSeedVerify(
			{
				rows: rows.value,
				serverSeed: serverSeed.value,
				clientSeed: clientSeed.value,
				nounce: nounce.value,
				risk: risk.value,
				gameHiddenContent: gameHiddenContent.value,
				gameVerifyContent: gameVerifyContent.value
			},
			setShow,
			setLoading
		)
	} else if (selectGame.value === 'mines') {
		minesSeedVerify(
			{
				mines: mines.value,
				serverSeed: serverSeed.value,
				clientSeed: clientSeed.value,
				nounce: nounce.value,
				gameHiddenContent: gameHiddenContent.value,
				gameVerifyContent: gameVerifyContent.value
			},
			setShow,
			setLoading
		)
	} else if (selectGame.value === 'dice') {
		diceSeedVerify(
			{
				serverSeed: serverSeed.value,
				clientSeed: clientSeed.value,
				nounce: nounce.value,
				gameHiddenContent: gameHiddenContent.value,
				gameVerifyContent: gameVerifyContent.value
			},
			setShow,
			setLoading
		)
	} else if (selectGame.value === 'limbo') {
		limboSeedVerify(
			{
				serverSeed: serverSeed.value,
				clientSeed: clientSeed.value,
				nounce: nounce.value,
				gameHiddenContent: gameHiddenContent.value,
				gameVerifyContent: gameVerifyContent.value
			},
			setShow,
			setLoading
		)
	} else if (selectGame.value === 'keno') {
		kenoSeedVerify(
			{
				serverSeed: serverSeed.value,
				clientSeed: clientSeed.value,
				nounce: nounce.value,
				riskKeno: riskKeno.value,
				gameHiddenContent: gameHiddenContent.value,
				gameVerifyContent: gameVerifyContent.value
			},
			setShow,
			setLoading
		)
	} else if (selectGame.value === 'wheel') {
		wheelSeedVerify(
			{
				serverSeed: serverSeed.value,
				clientSeed: clientSeed.value,
				nounce: nounce.value,
				risk: risk.value,
				rows: rows.value,
				gameHiddenContent: gameHiddenContent.value,
				gameVerifyContent: gameVerifyContent.value
			},
			setShow,
			setLoading
		)
	} else if (selectGame.value === 'diamonds') {
		diamondsSeedVerify(
			{
				serverSeed: serverSeed.value,
				clientSeed: clientSeed.value,
				nounce: nounce.value,
				gameHiddenContent: gameHiddenContent.value,
				gameVerifyContent: gameVerifyContent.value
			},
			setShow,
			setLoading
		)
	}
}, 500)
watch([rows, serverSeed, clientSeed, nounce, risk, mines], () => {
	if (props.showDialog) {
		debouncedHandler()
	}
})
onMounted(() => {
	rest()
	setVerify(gameDetailStore.gameResultData)
})
watch(
	() => gameDetailStore.gameResultData,
	(val: any) => {
		if (val?.serverSeed) {
			setVerify(val)
		}
	}
)
const add = () => {
	nounce.value = String(+nounce.value + 1)
}
const down = () => {
	nounce.value = +nounce.value - 1 < 0 ? '0' : String(+nounce.value - 1)
}
</script>
<style lang="scss" scoped>
.game-result-content {
	padding: 15px;
	border-radius: 8px;
	border: 1px solid rgba(150, 165, 170, 0.3);
}
.bg-inher {
	:deep(.n-base-selection),
	:deep(.n-base-selection-label) {
		height: 100% !important;
	}
	:deep(.n-base-selection-label) {
		background-color: inherit;
	}
}
.input-style {
	:deep(.n-input__input > .n-input__input-el) {
		height: 100% !important;
	}
}
.point {
	cursor: pointer;
}
</style>
